<html>
<head>
<link rel="stylesheet" type="text/css" media="screen,projection" href="layout.css" >
<script type="text/javascript">
// comment

function loadXMLDoc(dname)
{
        if (window.XMLHttpRequest)
          {
          xhttp=new XMLHttpRequest();
          }
        else
          {
          xhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
}

function onmouseoverr(e)
        {
                var targ;
                if (!e)
                  {
                  var e=window.event;
                  }
                if (e.target)
                  {
                  targ=e.target;
                  }
                else if (e.srcElement)
                  {
                  targ=e.srcElement;
                  }
                if (targ.nodeType==3) // defeat Safari bug
                  {
                  targ = targ.parentNode;
                  }

                var tname;
                tname=targ.tagName;
                if( tname == "SPAN"){
                        /*targ.style.backgroundColor="yellow";*/
                        tekst = targ.title;
                        document.getElementById("commentaar").innerHTML=tekst;
                        
                }
                
        
        }
        
function onmousedownn(e)
        {
                var targ;
                if (!e)
                  {
                  var e=window.event;
                  }
                if (e.target)
                  {
                  targ=e.target;
                  }
                else if (e.srcElement)
                  {
                  targ=e.srcElement;
                  }
                if (targ.nodeType==3) // defeat Safari bug
                  {
                  targ = targ.parentNode;
                  }

                var tname;
                tname=targ.tagName;
                if( tname == "SPAN"){
                        id= targ.id.substring(0,4);
                        //console.debug(id);
                        if(id=="woor"){                 // alleen op id's reageren van woord // BUGGY teksten kunnen dynamisch veranderen, dus moet weten welke tekst!
                                zoek_gelijke = document.getElementById("group2").checked;       // checken of de checkbox aanstaat
                                if(zoek_gelijke){
                                        //console.debug("zoek gelijke is 1");                                   
                                        tekstnummer = parseInt(targ.id.substring(7,8));
                                        huidiggekliktnummer = parseInt(targ.id.substring(8,25));
                                        //console.debug(targ.id + " "+ tekstnummer + " " + huidiggekliktnummer);
                                        if(tekstnummer == 1){
                                                anderetekstnummer = 2;
                                                verbondenwoord = woorden2[huidiggekliktnummer-1].getElementsByTagName("VERBONDEN")[0].childNodes[0].nodeValue;}
                                        else{
                                                anderetekstnummer = 1;
                                                verbondenwoord = woorden1[huidiggekliktnummer-1].getElementsByTagName("VERBONDEN")[0].childNodes[0].nodeValue;}
                                        //console.debug(anderetekstnummer);
                                        idanderetekst = "woorden" + anderetekstnummer + verbondenwoord;
                                        //console.debug(idanderetekst);
                                        // actie uitvoeren
                                        document.getElementById(idanderetekst).style.backgroundColor="yellow";
                                        targ.style.backgroundColor="yellow";                                    
                                }
                                        
                        }
                        else if (id =="zoek"){                  // geklikt op één van de zoek woorden
                                console.debug(targ.id);
                                zoeknummer = parseInt(targ.id.substring(4,10));
                                console.debug(zoeknummer);
                                zoeknummer = zoeknummer - 1;
                                //console.debug(zoeknummer);
                                console.debug(welkwoord);
                                if(tekstnummer){
                                        tussen = (welkwoord[zoeknummer]) + 1;
                                        woordid = "woorden1"+ tussen;
                                }
                                else{
                                        tussen = (welkwoord[zoeknummer]) + 1;
                                        woordid = "woorden2"+ tussen;
                                }                                
                                console.debug(woordid);
                                document.getElementById(woordid).style.backgroundColor="yellow";
                        }
                }
        }

        xmlDoc=loadXMLDoc("woorden.xml");
        console.debug("woorden.xml ingelezen");
        woorden1=xmlDoc.getElementsByTagName("WOORD");
        woorden2=xmlDoc.getElementsByTagName("WOORD2");
        
        
        function deleteColor(){
                ids = getAllTags();
                for( var tg=0 ; tg<ids.length; tg++) {
                        document.getElementById(ids[tg]).style.backgroundColor="white"; 
                }
        }

        function getAllTags(){  
                var allTags = document.body.getElementsByTagName('*');
                var ids = [];
                for (var tg = 0; tg< allTags.length; tg++) {
                    var tag = allTags[tg];
                    if (tag.id) {
                            ids.push(tag.id);
                     }   
                }
                return ids;
        }

        function highLigth(id){ 
                document.getElementById(id).style.backgroundColor="yellow";
        }
        

        function writeText(naam,idnaam){
                lijn=1;
                lijncode = "";
                for (var i=0;i<naam.length;i++)  { 
                        //console.debug("i=" + i);
                        tussen = naam[i].getElementsByTagName("LIJN")[0].childNodes[0].nodeValue;
                        tussen2 = parseInt(tussen);
                        
                        if (lijn - tussen2)
                        {
                                for(var t=0;t<(tussen-lijn);t++) {
                                        lijncode = lijncode + "<br />";
                                }
                                lijn = tussen2;
                        }
                        j=i+1;
                        lijncode = lijncode + "<span title='"+ naam[i].getElementsByTagName("COMMENT")[0].childNodes[0].nodeValue + "' id='" + idnaam + j + "'>" + naam[i].getElementsByTagName("WOORDZELF")[0].childNodes[0].nodeValue + "</span> ";

                }
                return lijncode;
        }
        
        
        function levenshtein (s1, s2) {
                  // Calculate Levenshtein distance between two strings  
                // 
                // version: 1009.2513
                // discuss at: http://phpjs.org/functions/levenshtein
                  // +            original by: Carlos R. L. Rodrigues (http://www.jsfromhell.com)
                  // +            bugfixed by: Onno Marsman
                  // +             revised by: Andrea Giammarchi (http://webreflection.blogspot.com)
                  // + reimplemented by: Brett Zamir (http://brett-zamir.me)
                  // + reimplemented by: Alexander M Beedie
                  // *                example 1: levenshtein('Kevin van Zonneveld', 'Kevin van Sommeveld');
                  // *                returns 1: 3
                if (s1 == s2) {
                        return 0;
                }
         
                var s1_len = s1.length;
                var s2_len = s2.length;
                if (s1_len === 0) {
                        return s2_len;
                }
                if (s2_len === 0) {
                        return s1_len;
                }
         
                // BEGIN STATIC
                var split = false;
                try{
                        split=!('0')[0];
                } catch (e){
                        split=true; // Earlier IE may not support access by string index
                }
                // END STATIC
                if (split){
                        s1 = s1.split('');
                        s2 = s2.split('');
                }
         
                var v0 = new Array(s1_len+1);
                var v1 = new Array(s1_len+1);
         
                var s1_idx=0, s2_idx=0, cost=0;
                for (s1_idx=0; s1_idx<s1_len+1; s1_idx++) {
                        v0[s1_idx] = s1_idx;
                }
                var char_s1='', char_s2='';
                for (s2_idx=1; s2_idx<=s2_len; s2_idx++) {
                        v1[0] = s2_idx;
                        char_s2 = s2[s2_idx - 1];
         
                        for (s1_idx=0; s1_idx<s1_len;s1_idx++) {
                                char_s1 = s1[s1_idx];
                                cost = (char_s1 == char_s2) ? 0 : 1;
                                var m_min = v0[s1_idx+1] + 1;
                                var b = v1[s1_idx] + 1;
                                var c = v0[s1_idx] + cost;
                                if (b < m_min) {
                                        m_min = b; }
                                if (c < m_min) {
                                        m_min = c; }
                                v1[s1_idx+1] = m_min;
                        }
                        var v_tmp = v0;
                        v0 = v1;
                        v1 = v_tmp;
                }
                return v0[s1_len];
        }

        function ChangeText(e){
        
        
                var targ;
                if (!e)
                  {
                  var e=window.event;
                  }
                if (e.target)
                  {
                  targ=e.target;
                  }
                else if (e.srcElement)
                  {
                  targ=e.srcElement;
                  }
                if (targ.nodeType==3) // defeat Safari bug
                  {
                  targ = targ.parentNode;
                  }


                kolom= targ.id.substring(0,10);
                console.debug(kolom);
                if (kolom !=""){
                        woorden = targ.id.substring(10,21);
                        console.debug(woorden);
                        if (woorden == "woorden1"){
                                document.getElementById(kolom).innerHTML=writeText(woorden1,"woorden1");   
                                
                        }
                        else if (woorden == "woorden2"){
                                document.getElementById(kolom).innerHTML=writeText(woorden2,"woorden2");   
                        }
                }
                
                
                
                

        }
        
        function searchdummy(){         
                tekstnummer = document.getElementById("group1").checked;
//              console.debug(tekstnummer);
                welkwoord=search(tekstnummer);
                zoekresultaat = new Array();
                for(var i=0;i<welkwoord.length;i++){ 
                        zoekresultaat[i] = naam[welkwoord[i]].getElementsByTagName("WOORDZELF")[0].childNodes[0].nodeValue;
                }               
                
                resultaat = "Zoek resultaat:";          
                //console.debug(welkwoord);
                for(var i=0;i<welkwoord.length;i++){ 
                        j=i+1;
                        resultaat=resultaat + "<br /><span id='zoek"+ j + "'>" + zoekresultaat[i] + "</span>";
                }               
                document.getElementById("search").innerHTML=resultaat;  
        }

        function search(aantal){
                searchlijst=new Array();
                if(aantal){
                        naam = woorden1;
                        for(var i=0;i<naam.length;i++){
                                searchlijst[i] = naam[i].getElementsByTagName("WOORDZELF")[0].childNodes[0].nodeValue;
                        }
                }
                else{
                        naam = woorden2;
                        for(var i=0;i<naam.length;i++){
                                searchlijst[i] = naam[i].getElementsByTagName("WOORDZELF")[0].childNodes[0].nodeValue;
                        }                       
                }
                
                textje = document.getElementById("txtSearch").value;
                //console.debug(textje);
                resultaat='';
                woord = 999999999999;
                var welkwoord=new Array();
                aantalwoorden = 0;
                for(var i=0;i<naam.length;i++){ 
                        woordjezelf = searchlijst[i];
                        terd = levenshtein(textje,woordjezelf);
                        if(terd<woord){

                                woord=terd;
                                aantalwoorden = 0;
                                welkwoord=new Array();
                                welkwoord[aantalwoorden] = i;                                                           
                        }
                        else if(terd==woord){

                                aantalwoorden = aantalwoorden+1;
                                woord=terd;
                                welkwoord[aantalwoorden] = i;
                        }
                }
                return welkwoord;
        }


</script>
</head>



<body onmousedown="onmousedownn(event)" onMouseOver="onmouseoverr(event)">

<h3>Nina, eindwerk, yes!</h3>




<!--<input type="button" onclick="test()" value="test" />-->



<div id="main1"><div id="main2"> 

        <div id="left"><div class="column-in"> 
                <input type="button" id="linkskolomwoorden1" onclick="ChangeText(event)" value="Tekst1" /><input type="button" id="linkskolomwoorden2" onclick="ChangeText(event)" value="Tekst2" />
                <h1>Tekst 1</h1>
                <span id="linkskolom"></span>
                <script type="text/javascript">
                        //document.getElementById("linkskolom").innerHTML=writeText(woorden1,"woorden1");
                </script>
        </div></div>

        <div id="right"><div class="column-in"> 
			<input type="button" id="colorreset" onclick="deleteColor()" value="Reset colorkes" />
			<input type="checkbox" id="group2" name="group2" value="tekst2">Zoek gelijke<br>
			<input type="text"  id=txtSearch size=25 value ="" onkeydown="searchdummy()">
			<br /><input type="radio" id="group1" name="group1" value="tekst1" checked>Tekst1<input type="radio" id="group1"  name="group1" value="tekst2" >Tekst2<br />
			<span id="search"></span>
			<h1>Commentaar</h1>
			<span id="tekst1"></span>
			<span id="commentaar"></span>
                
        </div></div>    

        <div id="middle"><div class="column-in"> 
                <input type="button" id="rechtkolomwoorden1" onclick="ChangeText(event)" value="Tekst1" /><input type="button" id="rechtkolomwoorden2" onclick="ChangeText(event)" value="Tekst2" />
                <h1>Tekst 2</h1>
                <span id="rechtkolom"></span>
                <script type="text/javascript">
                        document.getElementById("rechtkolom").innerHTML=writeText(woorden2,"woorden2");
                </script>

        </div></div>
        

<div class="cleaner">&nbsp;</div> 
</div></div> 


<div id="footer"><div class="column-in"> 
        <h4>The footer</h4> 
        <p> 
                Anything follows here...
                
        </p> 
</div></div> 

</body>
</html>